﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可视化布局工具</title>
<link rel="shortcut icon" href="/favicon.ico" />
<!--布局系统-->
<link href="/Static/lib/css/layoutit.css" rel="stylesheet">
<link href="/Static/lib/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="/Static/lib/jquery.min.js"></script>
<script src="/Static/lib/bootstrap.min.js"></script>
<script src="/Static/lib/jquery-ui.js"></script>
<script src="/Static/lib/jquery.ui.touch-punch.min.js"></script>
<script src="/Static/lib/jquery.htmlClean.js"></script>
<script src="/Static/lib/scripts.js"></script>
<!--栅格系统-->
<link rel="stylesheet" href="/Static/css/grid12.css" />
</head>
<body class="edit" >
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid"> <a class="brand" href="#">  可视化布局工具 </a>
      <div class="nav-collapse collapse">
        <ul class="nav" id="menu-layoutit">
          <li class="divider-vertical"></li>
          <li>
            <div class="btn-group" data-toggle="buttons-radio">
              <button type="button" id="edit" class="btn btn-primary active"> <i class="icon-edit icon-white"></i> 布局 </button>
              <button type="button" class="btn btn-primary" id="devpreview"> <i class="icon-eye-close icon-white"></i> 预览 </button>
              <button type="button" class="btn btn-primary" data-target="#downloadModal" rel="/build/downloadModal" role="button" data-toggle="modal"> <i class="icon-download-alt icon-white"></i> 生成 </button>
            </div>
            <div class="btn-group">
              <button class="btn btn-primary" href="#undo" id="undo"> <i class="icon-arrow-left icon-white"></i> 撤销 </button>
              <button class="btn btn-primary" href="#redo" id="redo"> <i class="icon-arrow-right icon-white"></i> 恢复 </button>
              <button class="btn btn-primary" href="#clear" id="clear"> <i class="icon-trash icon-white"></i> 清空 </button>
            </div>
            <div class="btn-group">
              <a class="btn btn-primary" href="./resources/Doc/index.htm" target="_blank"> <i class="icon-question-sign icon-white"></i> 帮助 </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!--左侧列表-->
<div class="sidebar-nav">
	<div class="nav-list">
      <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"> <i class="icon-remove icon-white"></i> 删除 </a> <span class="drag label"> <i class="icon-move"></i> 拖动 </span> <span class="label spacing" > <i class="icon-th-large icon-white"></i> 间距 </span> <span class="label fullrow" data-target="#wrapClass" role="button" data-toggle="modal"> <i class="icon-resize-full icon-white"></i> 通栏 </span>
        <div class="preview grids">
          <input value="12" type="text">
        </div>
        <div class="view">
          <div class="wrap">
            <div class="row">
              <div class="span-12"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"> <i class="icon-remove icon-white"></i> 删除 </a> <span class="drag label"> <i class="icon-move"></i> 拖动 </span> <span class="label spacing" > <i class="icon-th-large icon-white"></i> 间距 </span> <span class="label fullrow" data-target="#wrapClass" role="button" data-toggle="modal"> <i class="icon-resize-full icon-white"></i> 通栏 </span>
        <div class="preview">
          <input value="6 6" type="text">
        </div>
        <div class="view">
          <div class="wrap">
            <div class="row">
              <div class="span-6"></div>
              <div class="span-6"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"> <i class="icon-remove icon-white"></i> 删除 </a> <span class="drag label"> <i class="icon-move"></i> 拖动 </span> <span class="label spacing" > <i class="icon-th-large icon-white"></i> 间距 </span> <span class="label fullrow" data-target="#wrapClass" role="button" data-toggle="modal"> <i class="icon-resize-full icon-white"></i> 通栏 </span>
        <div class="preview">
          <input value="8 4" type="text">
        </div>
        <div class="view">
          <div class="wrap">
            <div class="row">
              <div class="span-8"></div>
              <div class="span-4"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"> <i class="icon-remove icon-white"></i> 删除 </a> <span class="drag label"> <i class="icon-move"></i> 拖动 </span> <span class="label spacing" > <i class="icon-th-large icon-white"></i> 间距 </span> <span class="label fullrow" data-target="#wrapClass" role="button" data-toggle="modal"> <i class="icon-resize-full icon-white"></i> 通栏 </span>
        <div class="preview">
          <input value="4 4 4" type="text">
        </div>
        <div class="view">
          <div class="wrap">
            <div class="row">
              <div class="span-4"></div>
              <div class="span-4"></div>
              <div class="span-4"></div>
            </div>
          </div>
        </div>
      </div>
   </div>
  <!--  <ul class="nav nav-list accordion-group">
    <li class="nav-header"> <i class="icon-plus icon-white"></i> 应用扩展 </li>
    <li class="boxes mute" id="elmComm">
      <div class="preview">建设中...</div>
    </li>
  </ul>
    -->
</div>
<!--可视化布局容器-->
<div style="min-height: 260px;" class="demo ui-sortable"> </div>
<!--下载容器-->
<div id="download-layout">
  <div class="body"> </div>
</div>
<!--生成-->
<div class="modal hide fade" role="dialog" id="downloadModal" aria-hidden="true">
  <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
    <h3>生成</h3>
  </div>
  <div class="modal-body">
    <p>已生成栅格HTML, 可以复制粘贴代码到你的项目.</p>
    <br>
    <br>
    <p>
      <textarea></textarea>
    </p>
  </div>
  <div class="modal-footer"> <a class="btn" data-dismiss="modal">关闭</a> </div>
</div>
<!--通栏附加class-->
<div class="modal hide fade" role="dialog" id="wrapClass" aria-hidden="true">
  <form id="wrapClassForm">
    <p>
      <input type="text" id="wrapClassInput" />
      <label for="wrapClassInput">附加Class</label>
    </p>
    <p>
      <input type="radio" name="tagname" value="div" id="tagToDiv">
      <label for="tagToDiv">普通</label>
      <input type="radio" name="tagname" value="header" id="tagToHeader">
      <label for="tagToHeader">指定为头部</label>
      <input type="radio" name="tagname" value="footer" id="tagToFooter">
      <label for="tagToFooter">指定为底部</label>
    </p>
    <p>
      <input type="checkbox" name="nowrap" id="nowrap">
      <label for="nowrap">去除wrap</label>
    </p>
    <button type="submit">完成</button>
  </form>
</div>
<div class="modal hide fade" role="dialog" id="sourceModal" aria-hidden="true">
  <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
    <h3>编辑源码</h3>
  </div>
  <div class="modal-body">
    <p>如果你希望对别人的布局进行二次编辑, 请把可编辑源码粘贴在这里:</p>
    <p>
      <textarea id="sourceeditor"></textarea>
    </p>
  </div>
  <div class="modal-footer"> <a id="savesource" class="btn btn-primary" data-dismiss="modal">保存</a> <a class="btn" data-dismiss="modal">关闭</a> </div>
</div>
<div class="modal hide fade" role="dialog" id="shareModal" aria-hidden="true">
  <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
    <h3>保存</h3>
  </div>
  <div class="modal-body">保存成功</div>
  <div class="modal-footer"> <a class="btn" data-dismiss="modal">Close</a> </div>
</div>
</body>
</html>